<template>
    <div class="cell">
        <!-- <img :src="vImg" id ="show_video"> -->
        <div class="cell-tool">
            <el-button-group>
                <el-button type="primary" @click="cellCount = 1" size="small">单屏</el-button>
                <el-button type="primary" @click="cellCount = 4" size="small">四分屏</el-button>
                <el-button type="primary" @click="cellCount = 9" size="small">九分屏</el-button>
                <el-button type="primary" @click="cellCount = 16" size="small">十六分屏</el-button>
                <!-- <el-button type="primary" @click= "requstWs"  size="small">发送</el-button> -->
            </el-button-group>
        </div>
        <div class="cell-player">
            <div :class="cellClass()" v-for="i in cellCount" :key="i">
                <ImgPlayer num = "i"></ImgPlayer>
            </div>
        </div>
    </div>
</template>

<script>
// import LivePlayerDemo from './LivePlayerDemo.vue'
import ImgPlayer from '../ImgPlayer/index.vue'
// import { sendWebsocket, closeWebsocket } from '@/utils/websocket.js'
// import request from '@/utils/request'
// import { openAnalys } from '@/api/screen/screenSocket'
// import axios from 'axios'

export default {
    components: { ImgPlayer },
    data() {
        return {
            cellCount: 4,
            // vImg,
        }
    },
    computed: {
        cellClass() {
            return function () {
                switch (this.cellCount) {
                    case 1:
                        return ['cell-player-1']
                    case 4:
                        return ['cell-player-4']
                    case 9:
                        return ['cell-player-9']
                    case 16:
                        return ['cell-player-16']
                    case 100:
                        return ['cell-player-100']
                    default:
                        break;
                }

            }
        },

    },
//     beforeDestroy () {
//     // 页面销毁时关闭ws。因为有可能ws连接接收数据尚未完成，用户就跳转了页面
//     // 在需要主动关闭ws的地方都可以调用该方法
//     closeWebsocket()
//   },

//   methods: {
//     // ws连接成功，后台返回的ws数据，组件要拿数据渲染页面等操作
//     wsMessage (data) {
//     //   const dataJson = JSON.parse(data)
//       console.log("websocket传递的信息:  ", data)
//       if(data.code === 200){
//         // this.vImg = 'data:image/png;base64,'+ data.data 
//       } 
//       // 这里写拿到数据后的业务代码
//     },
//     // ws连接失败，组件要执行的代码
//     wsError () {
//       // 比如取消页面的loading
//     },
//     requstWs () {
//       // 防止用户多次连续点击发起请求，所以要先关闭上次的ws请求。
//       closeWebsocket()

//       // 跟后端协商，需要什么参数数据给后台
//       const obj = {
//         id: 1,
//         isMainFlow: 0
//       }
//       // 发起ws请求
//       sendWebsocket('ws://localhost:8080/webSocketServer/1', obj, this.wsMessage, this.wsError)
//     }
//   }
}
</script>

<style scoped>
.cell-tool {
    height: 30px;
    line-height: 30px;
}
.cell-player {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60%;
    width: 70%;
    margin-top: -70px;
}
.cell-player-4 {
    width: 50%;
    height: 50% !important;
    box-sizing: border-box;
}
.cell-player-1 {
    width: 100%;
    box-sizing: border-box;
}

.cell-player-9 {
    width: 33.33%;
    height: 33.33% !important;
    box-sizing: border-box;
}
.cell-player-16 {
    width: 25%;
    height: 25% !important;
    box-sizing: border-box;
}
.cell-player-100 {
    width: 100%;
    height: 100% !important;
    box-sizing: border-box;
}
.cell {
    position:relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}
</style>>
